<template>
  <div class="shareList">
    <sub-nav-bar title="面经分享" path="/home/find"></sub-nav-bar>
    <div class="content">
      <!-- 搜索框 -->
      <van-search
        v-model="inputValue"
        show-action
        placeholder="请输入要搜索的内容"
        @search="searchEvent"
        @cancel="cancelEvent"
        class="search"
      ></van-search>
      <!-- 面经组件 -->
      <div v-if="showList">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多数据了"
          @load="load"
        >
          <shareItem
            v-for="(item, index) in list"
            :key="index"
            :info="item"
          ></shareItem>
        </van-list>
      </div>
      <!-- 大家都在搜 -->
      <div v-else>
        <h3 class="title">大家都在搜</h3>
        <van-tag
          color="#f7f4f5"
          text-color="#848598"
          class="tag"
          v-for="(item, index) in hotList"
          :key="index"
          @click="tagClick(item)"
          >{{ item }}</van-tag
        >
        <!-- 历史搜索 -->
        <van-cell center>
          <template #title>
            <div class="title">
              历史搜索
            </div>
          </template>
          <template #default>
            <div class="value">
              清空
            </div>
          </template>
        </van-cell>
        <van-tag
          color="#f7f4f5"
          text-color="#848598"
          class="tag"
          v-for="(item, index) in historyList"
          :key="index"
          >{{ item }}</van-tag
        >
      </div>
    </div>
  </div>
</template>

<script>
import shareItem from './shareItem.vue'
import { articlesShare, articlesShareTopSearch } from '@/api/find'
import { getToken, setToken, removeToken } from '@/utils/local.js'
export default {
  name: 'shareList',
  data () {
    return {
      inputValue: this.$route.query.q ? this.$route.query.q : '',
      list: [], // 存储面经分享列表
      loading: false, // 是否处于加载中
      // 是否加载完成(没有下一页)Boolean：true 加载完成(还有下一页)boolean:false
      finished: false,
      currPage: 1, // 当前页
      pageSize: 5, // 每页多少条
      showList: true, // 是否显示列表
      bol: false, // 静默刷新
      hotList: [], // 大家都在搜
      historyList: JSON.parse(getToken('historyList')) || [] // 历史搜索
    }
  },
  methods: {
    // 搜索
    searchEvent () {
      // 清空列表
      this.list = []
      // 还原list 组件用到的值
      this.loading = false
      this.finished = false
      // 还原当前页为 1
      this.currPage = 1
      // 静默刷新
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
      // 搜索时显示列表
      this.showList = true
      // 1:不能为空
      // 2:不能重复
      if (this.inputValue.trim() !== '') {
        // 3：后面搜索的热词，要添加到最前面
        this.historyList.unshift(this.inputValue)
        // 2：不能重复
        this.historyList = [...new Set(this.historyList)]
        // 只要前面5条
        this.historyList.splice(5)
        // 把数据储存到localstorage,因为储存的是数组要转换成字符并存储
        setToken(JSON.stringify(this.historyList), 'historyList')
      }
      // 搜索时，改变当前路由地址
      this.$router.push('/home/shareList?q=' + this.inputValue)
    },
    // 取消
    async cancelEvent () {
      // 取消时显示大家都在搜索
      this.showList = false
      if (!this.hotList.length) {
        const res = await articlesShareTopSearch()
        // window.console.log(res)
        this.hotList = res.data.data
      }
    },
    // 上拉加载数据
    async load () {
      // 调用列表接口
      const res = await articlesShare({
        start: (this.currPage - 1) * this.pageSize,
        limit: this.pageSize,
        q: this.inputValue
      })
      this.currPage++
      // 当输入框的值不为空，再做title的字符替换
      if (this.inputValue.trim() !== '') {
        res.data.data.list.forEach(item => {
          // 将title分割成数组
          // 将数组拼接成字符串，实现字符替换
          item.title = item.title
            .split(this.inputValue)
            .join(`<span style="color:red">${this.inputValue}</span>`)
        })
      }
      // 获取数据要累加处理
      this.list.push(...res.data.data.list)
      // 加载完成
      this.loading = false
      // 判断所有数据是否加载完成，
      if (this.list.length >= res.data.data.total) {
        // 加载完成修改finished的值为true:表示没有下一页
        this.finished = true
      }
    },
    // 大家都在搜索
    tagClick (str) {
      // 修改输入框的值为相应值
      this.inputValue = str
      this.searchEvent()
    },
    // 清空
    clearEVent () {
      this.historyList = []
      removeToken('historyList')
    }
  },
  // 导入组件
  components: {
    shareItem
  },
  async created () {
    // const res = await articlesShare()
    // window.console.log(res)
    // this.list = res.data.data.list
    // window.console.log(this.list)
  },
  activated () {
    const _top = this.$route.meta.scrollTop || 0
    window.scrollTo(0, _top)
    // 在相应组件的activated中恢复相应位置
    // window.console.log(this.$route.meta.scrollTop)
  }
}
</script>

<style lang="less" scped>
.shareList {
  .content {
    padding: 0 @p15;
    .search {
      padding-left: 0;
      padding-right: 0;
    }
    .title {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      color: #222;
      line-height: 25px;
      letter-spacing: 0px;
    }
    .mb28 {
      margin-top: 32px;
      margin-bottom: 15px;
    }
    .tag {
      padding: 5px 8px;
      margin-right: 15px;
      margin-bottom: 15px;
    }
    .van-cell {
      padding-left: 0;
      padding-right: 0;
    }
  }
}
</style>
